<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			/* 练习：1.圆形   2.正三角行
					思路1：宽高与边框倒角一致
					思路2：div#triangle     css中：抓到div    【斜线】
							左边框：50px实线红色
							右边框：50px实线黄色
							下边框：50px实线黑色
					注意：先别加宽高  transparent 透明色
			*/
			div#cirle{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				border-radius: 50%;
				/* 边框阴影 box-shadow 属性 */
				box-shadow: 5px 5px 50px 5px red inset;
			}
			/* 思路2：div#triangle     css中：抓到div    【斜线】
					左边框：50px实线红色
					右边框：50px实线黄色
					下边框：50px实线黑色
			注意：先别加宽高  transparent 透明色 */
		    div#triangle{
				width: 0;
				border: 50px solid transparent;
				border-top:50px solid rgba(0, 0, 255, .3);
				/* 两行：倒三角，蓝色，透明度 .3 */
			}
			input{
				outline: 1px solid red;
			}
			/* 实际应用：通配选择器 去掉轮廓 
			  {outline: 0;}
			*/
		</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>